.container {
  background: #f5f5f5;

  /* 搜索 */
  .search {
    display: flex;
    align-items: center;
    top: 80rpx;
    width: 100%;
    line-height: 56rpx;
    padding: 12rpx;
    text-align: center;
    background-color: #fff;
    .city {
      padding: 0 24rpx;
      font-size: 28rpx;
    }
    .section {
      flex-grow: 1;
      display: flex;
      align-items: center;
      height: 60rpx;
      z-index: 1;
      border-radius: 50rpx;
      left: 4%;
      margin-right: 32rpx;
      padding: 0 24rpx;
      background: #f0f0f0;

      .placeholder {
        display: block;
        font-size: 24rpx;
        color: #666;
      }
      .search-img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 24rpx;
      }
    }
  }

  .content {
    /* 轮播图及搜索框  height:422rpx*/
    .pic-swiper {
      width: 100%;
      height: 300rpx;
      overflow: hidden;
      padding: 10rpx 0;
      background: #fff;

      .banner-item {
        font-size: 26rpx;
        font-weight: bold;
        box-sizing: border-box;
        .img-box {
          font-size: 0;

          .banner {
            width: 90%;
            height: 300rpx;
            margin: 0 10rpx;
            border-radius: 24rpx;
            display: inline-block;
            // box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
          }
        }
      }
      .wx-swiper-dots {
        margin-bottom: 15rpx;
      }
    }
    /* 消息播放 */
    .message {
      position: relative;
      height: 90rpx;
      background-color: #f5f5f5;
      margin: auto;
      padding: 0 50rpx 0 80rpx;
      box-sizing: border-box;
      box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);

      .notice {
        position: absolute;
        width: 36rpx;
        height: 36rpx;
        left: 20rpx;
        top: 27rpx;
      }

      .swiper-cont {
        height: 80rpx;
        line-height: 80rpx;
        .items {
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-align: left;
          font-size: 24rpx;
          color: #c90505dd;
        }
      }

      .arrow {
        width: 15rpx;
        height: 15rpx;
        border-top: 3rpx solid #686868;
        border-right: 3rpx solid #686868;
        transform: rotate(45deg);
        position: absolute;
        right: 30rpx;
        top: 34rpx;
      }
    }
    /* 分类栏目 */
    .menu-item {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding-top: 20rpx;
      padding-bottom: 30rpx;
      border-radius: 12rpx;
      border: 1rpx solid #f1f1f1;
      margin: 12rpx;

      .item {
        text-align: center;
        width: 25%;
        display: flex;
        flex-direction: column;
        margin: auto;
        align-items: center;
        image {
          width: 75rpx;
          height: 75rpx;
        }
        text {
          font-size: 26rpx;
          margin-top: 20rpx;
        }
      }
    }
  }

  .goods {
    .titleBar {
      display: flex;
      justify-content: space-between;
      height: auto;
      padding: 24rpx 0 24rpx 24rpx;
      background-color: #fff;
      .titles {
        color: #000;
        font-weight: bold;
        font-size: 28rpx;
      }
      .more {
        .text {
          color: #666;
          font-size: 24rpx;
          padding: 0 20rpx;
          height: 44rpx;
          line-height: 44rpx;
        }
        .arrow {
          top: 58rpx;
          right: 30rpx;
          border-top: 2rpx solid #666;
          border-right: 2rpx solid #666;
        }
      }
    }

    /* 每行3列 */
    .column3 {
      .content {
        margin: auto;
        height: auto;
        width: calc(100% - 40rpx);
        display: flex;
        flex-wrap: wrap;
        padding-top: 12rpx;

        &::before {
          clear: both;
          height: 0;
          overflow: hidden;
        }
        .prodItem {
          border-radius: 24rpx;
          width: 30%;
          background: #fff;
          display: inline-block;
          margin: 0 8rpx;
          margin-bottom: 20rpx;
          box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);

          .image {
            width: 100%;
            font-size: 0;
            .prodimg {
              width: 100%;
              height: 200rpx;
              vertical-align: middle;
              border-top-left-radius: 10rpx;
              border-top-right-radius: 10rpx;
              font-size: 0;
            }
          }

          .goodsName {
            font-size: 18rpx;
            margin: 10rpx 0;
            height: 60rpx;
            color: #000;
            padding: 0 10rpx;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .price {
            font-size: 24rpx;
            color: #eb2404;
            font-family: Arial;
            padding: 0 12rpx 12rpx;
          }
        }
      }
    }

    /* 每行2列 */
    .column2 {
      .list {
        padding-bottom: 12rpx;

        .productItem {
          border-radius: 12rpx;
          width: 47%;
          display: inline-block;
          background: #fff;
          padding-bottom: 6rpx;
          box-sizing: border-box;
          box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);

          &:nth-child(2n-1) {
            margin: 12rpx 10rpx 10rpx 12rpx;
          }
          &:nth-child(2n) {
            margin: 6rpx 6rpx 10rpx 6rpx;
          }

          .icon {
            width: 100%;
            height: 341rpx;
            border-top-left-radius: 12rpx;
            border-top-right-radius: 12rpx;
            font-size: 0;
            text-align: center;
            .pic {
              width: 100%;
              height: 341rpx;
            }
          }

          .content {
            margin-top: 12rpx;
            padding: 0 10rpx;

            .goodsName {
              font-size: 24rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .describe {
              font-size: 22rpx;
              margin-top: 12rpx;
              color: #999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .textInfo {
              position: relative;
              height: auto;
              font-family: Arial;
              padding: 6rpx 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .price {
                margin-top: 12rpx;
                display: inline;
                font-size: 28rpx;
                color: #f02e2e;
              }
              .basket-img {
                width: 40rpx;
                height: 40rpx;
                padding: 8rpx;
              }
            }
          }
        }
      }
    }

    /* 每行1列 */
    .column1 {
      background: #fff;

      .productItem {
        display: flex;
        // justify-content: flex-start;
        border-top: 2rpx solid #f4f4f4;
        padding: 20rpx;

        .icon {
          width: 200rpx;
          height: 200rpx;
          flex-shrink: 0;
          .pic {
            width: 100%;
            height: 100%;
          }
        }

        .content {
          width: auto;
          margin-left: 30rpx;
          padding-bottom: 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .textInfo {
            margin-top: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price {
              font-size: 28rpx;
              font-family: arial;
              color: #e02e2e;
            }
            .basket-img {
              width: 50rpx;
              height: 50rpx;
            }
          }
          .goodsName {
            margin: 0;
            font-size: 28rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
            display: -webkit-box;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .describe {
            font-size: 22rpx;
            color: #999;
            // white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .go-to-buy {
            font-size: 26rpx;
            background: #fff2f5;
            color: #e02e2e;
            border-radius: 50rpx;
            text-align: center;
            padding: 12rpx 20rpx;
            position: absolute;
            right: 20rpx;
            bottom: 20rpx;
          }
        }
      }
    }
  }

  .empty {
    font-size: 24rpx;
    background-color: #f5f5f5;
    text-align: center;
    padding: 80rpx 0;
  }
}
